<template>
  <div class="left_menu">
    <div class="aside-title">
      资产管理
    </div>
    <el-card class="box-card">
      <router-link v-for="d in data" :key="d.id" :to="d.menuUrl" v-if="d.have">
        <div :id="d.id" class="text item" :class="[chosenItem === d.id ? 'active' : '']" @click="clickItem(d.id)">
          <i style="width: 23px;" :class="d.ficon"></i> {{ d.label }}
        </div>
      </router-link>
    </el-card>
  </div>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array
      }
    },
    data() {
      return {
        chosenItem: ''
      }
    },
    methods: {
      clickItem(val) {
        sessionStorage.setItem('ASSETINDEX', val);
        this.chosenItem = val;
      }
    },
    watch: {
      chosenItem(newval, oldval) {
        if (newval !== '' && oldval == '')
          for (let i of this.data) {
            if (i.id = newval) {
              this.$router.push(i.menuUrl);
              //this.chosenItem = i.id;
              return;
            }
          }
      }
    },
    mounted() {
      this.$nextTick(() => {
        if (sessionStorage.getItem('ASSETINDEX')) {
          this.chosenItem = sessionStorage.getItem('ASSETINDEX');
        } else {
          for (let i of this.data) {
            if (i.have) {
              this.chosenItem = i.id;
              return;
            }
          }
        }
      })
    }
  }

</script>

<style scoped>
  .left_menu {
    height: inherit;
    margin-right: 20px;
  }

  .text {
    padding: 0 20px;
    font-size: 12px;
    font-weight: bold;
    color: #666;
  }

  .text .icon {
    margin-left: 8px;
  }

  .item {
    height: 36px;
    width: 100%;
    cursor: pointer;
    line-height: 36px;
  }

  .box-card {
    width: inherit;
    height: inherit;
  }

  .active {
    background: #0e8dea;
    color: #fff;
  }

</style>

